<template>
  <header-view title="账号管理"></header-view>
  <div>
    <van-field v-model="name" label="昵称" placeholder="请输入昵称" />
    <van-field
      v-model="sign"
      label="个性签名"
      placeholder="请输入个性签名"
      disabled
    />
    <van-field v-model="pass" label="密码" placeholder="请输入密码" />
  </div>
  <van-button
    type="primary"
    color="#ffc300"
    round
    block
    class="save-btn"
    @click="save"
    >保存
  </van-button>
  <van-button
    type="primary"
    color="#ffc300"
    round
    block
    class="save-btn"
    @click="logOut"
    >退出登录
  </van-button>
</template>

<script>
import HeaderView from "@/components/HeaderView.vue";
import { showToast } from "vant";
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
export default {
  components: { HeaderView },
  setup() {
    let router = useRouter();
    const data = reactive({
      name: "",
      sign: "It's better than never.",
      pass: "",
    });
    const save = () => {
      if (data.name && data.pass) {
        let userInfo = JSON.parse(localStorage.userInfo);
        let newUserInfo = {
          user: data.name || userInfo.name,
          pass: data.pass || userInfo.pass,
        };
        localStorage.setItem("userInfo", JSON.stringify(newUserInfo));
        showToast("修改成功~");
        router.push("/mine");
      } else {
        showToast("请输入内容~");
      }
    };
    const logOut = () => {
      localStorage.removeItem("isLogin");
      showToast("退出成功~");
      router.push("/home");
    };
    return {
      save,
      logOut,
      ...toRefs(data),
    };
  },
};
</script>

<style lang="scss" scoped>
.save-btn {
  width: 80%;
  margin: 20px auto;
}
</style>
